<template>
  <div>
    <div id="cornerComment" v-if="detailVisible">
      <div class="cornerComment-in">
        <div class="cornerComment-in-title">
          <span>类目基本规则</span>
          <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
        </div>
        <div class="commentBody">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item>
              <el-button type="primary" size="mini" @click="ruleId=0,editvisible=true">新增规则</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="rulesList">
            <el-table-column label="ID" prop="id" width="80"/>
            <el-table-column label="规则名称" prop="name"/>
            <el-table-column label="开始时间" prop="beginTime"/>
            <el-table-column label="结束时间" prop="endTime"/>
            <!--      <el-table-column label="Task Result" prop="roleSort" width="200">-->
            <!--        <template slot-scope="scope">-->
            <!--          <el-progress :percentage="scope.row.progress" :format="format" :color="scope.row.type"></el-progress>-->
            <!--        </template>-->
            <!--      </el-table-column>-->
            <!--      <el-table-column label="operate" prop="roleSort" width="110">-->
            <!--        <template slot-scope="scope">-->
            <!--          <el-link>Try again</el-link>-->
            <!--        </template>-->
            <!--      </el-table-column>-->
            <el-table-column label="操作" prop="roleSort" width="160" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" plain @click="ruleId=scope.row.id,editvisible=true">编辑</el-button>
                <el-button type="danger" size="mini" plain @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
        <div class="cornerComment-in-footer">
          <el-button size="small" @click="closePOpup">取消</el-button>
        </div>
      </div>
    </div>
    <editRule :visible.sync="editvisible" typeEdit="cate" :ruleId="ruleId" :deviceDetail="{category: cateId}" @initList="getList"></editRule>
  </div>
</template>

<script>
import { listRules, delRules } from "@/api/system/rules";
import editRule from "../device/components/editRule";
export default {
  props: ['visible', 'cateId'],
  name: "deviceDetail",
  components:{editRule},
  data() {
    return {
      editvisible: false,
      detailVisible: false,
      ruleId: 0,
      jsonList: [
        {
          key_name: '',
          value_name: '',
          type: 1,
          list: []
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cateId: 0,
        type: 1,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      total: 0,
      rulesList:[]
    }
  },
  watch:{
    visible(){
      this.detailVisible = this.visible
      if(!this.visible){
      }else{
        this.queryParams.cateId = this.cateId
        this.getList();
      }
    }
  },
  methods: {
    getList() {
      this.loading = true;
      // this.queryParams.cateId = this.cateId
      listRules(this.queryParams).then(response => {
        this.rulesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    chooseRule(row){
      this.$emit('getRule', row)
      this.closePOpup()
    },
    /** reset按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** search按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    showRuleFn(rowId) {
    },
    /** delete按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('Are you sure to delete the data item for rule '+row.id+'？').then(function() {
        return delRules(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("success");
      }).catch(() => {});
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.cornerComment-in {
  width: 650px;
  height: 55%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}
</style>
